<template>
  <div class="_supFriend">
    <img class="bgImg" :src="bgImg" alt />
    <van-image round class="headImg" :src="headImg" alt />
    <div class="nickName">您的好友{{nickName}}</div>
    <div class="contentCon">
      <van-slider v-if="num < 5" :value="rate" active-color="#051d2d" bar-height="3.333vw">
        <template #button>
          <div style="display:none"></div>
        </template>
      </van-slider>
      <div class="supContent" v-if="num < 5">
        已助力
        <span>{{num}}</span>人，还差
        <span>{{lackNum}}</span>位好友
      </div>
      <div v-if="num >= 5" class="sucContent">好友已完成助力</div>
    </div>
    <div class="supBtn" @click="supBtnClick"></div>
    <div class="joinMy" @click="joinClick"></div>
    <div class="goodsSup1" @click="seckClick(1)"></div>
    <div class="goodsSup2" @click="seckClick(2)"></div>
    <div class="goodsSup3" @click="seckClick(3)"></div>
  </div>
</template>

<script>
import bgImg1 from "@/assets/直播分享页.jpg";
import { mapMutations, mapActions } from "vuex";
import qs from "qs";
import { Toast, Slider, Image, Dialog } from "vant";
export default {
  components: {
    [Slider.name]: Slider,
    [Image.name]: Image
  },
  data() {
    return {
      bgImg: bgImg1,
      gid: 0,
      canClick: false,
      headImg: "",
      nickName: "",
      num: 0,
      lackNum: 5,
      rate: 0
    };
  },
  computed: {
    activityMsg() {
      return this.$store.state.activityMsg;
    },
    supCount() {
      return this.$store.state.activity.supCount;
    },
    supInfo() {
      return this.$store.state.activity.supInfo;
    },
    avList() {
      return this.$store.state.activity.avList;
    }
  },
  watch: {
    activityMsg: {
      deep: true,
      immediate: true,
      handler(val, oldVal) {
        if (val && val.srAsId) {
          // this.initData(val);
        }
      }
    },
    avList: {
      deep: true,
      immediate: true,
      handler(val, oldVal) {
        if (val.length > 0) {
          this.num = val.length;
          this.lackNum = val.length < 5 ? 5 - val.length : 0;
          this.rate = (val.length / 5) * 100;
        }
      }
    },
    supInfo: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val && val.asOpenid) {
          this.initData2(val);
        }
      }
    }
  },
  mounted() {
    Toast.loading({ forbidClick: true });
  },
  methods: {
    ...mapActions({
      getUserSupId: "activity/getUserSupId",
      supFriend: "activity/supFriend",
      getSupInfo: "activity/getSupInfo"
    }),
    initData(acMsg) {
      this.getSupInfo({
        assistId: acMsg.srAsId
      })
        .then(res => {
          if (res && res.code == "000000") {
            if (this.$store.state.userId == res.portActivityAssist.asOpenid) {
              //当前人打开自己的助力
              Toast.clear();
              this.$router.replace({
                name: "mySup"
              });
            } else {
              if (res.portActivityAssist.asProductid) {
                let p = res.portActivityAssist.asProductid;
                switch (p) {
                  case "1": {
                    this.bgImg = bgImg1;
                    break;
                  }
                  case "2": {
                    this.bgImg = bgImg2;
                    break;
                  }
                  case "3": {
                    this.bgImg = bgImg3;
                    break;
                  }
                }
                this.canClick = true;
              }
            }
          } else {
            Toast("获取助力信息失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    initData2(val) {
      try {
        let info = JSON.parse(val.asInfo);
        this.headImg = info.headImgUrl;
        this.nickName = info.nickname;
        this.canClick = true;
        Toast.clear();
      } catch (error) {}
    },
    supBtnClick() {
      if (this.canClick) {
        if (this.$store.state.userId == this.supInfo.asOpenid) {
          Dialog({ message: "不能为自己助力哦~" });
        } else {
          this.supFriend({
            helperOpenId: this.$store.state.userId,
            assistId: this.activityMsg.srAsId,
            helperInfo: JSON.stringify(this.$store.state.userInfo)
          })
            .then(res => {
              if (res && (res.code == "000000" || res.code == "000030")) {
                let self = this;
                Dialog({
                  message: "您已为Ta助力成功",
                  confirmButtonText: "参与0.01元助力",
                  beforeClose: (action, done) => {
                    self.$router.push({
                      name: "act7index"
                    });
                    done();
                  }
                });
              } else {
                Toast(res.msg);
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      } else {
        Toast("获取信息失败，请重新打开页面");
      }
    },
    startBtnClick() {
      if (this.$store.state.activity.supInfoMy.asProductid) {
        //当前人有发起过助力
        this.$router.push({
          name: "mySup",
          query: {
            ...this.$route.query,
            gid: this.$store.state.activity.supInfoMy.asProductid
          }
        });
      } else {
        this.$router.push({
          name: "startSup",
          query: {
            ...this.$route.query,
            gid: this.gid
          }
        });
      }
    },
    joinClick() {
      this.$router.push({
        name: "act7index"
      });
    },
    seckClick(item) {
      if (
        this.$store.state.activity.supInfoMy.asProductid &&
        this.$store.state.activity.supInfoMy.asProductid != item
      ) {
        //当前人有发起过助力，且点击的不是助力的商品
        // this.$router.push({
        //   name: "mySup",
        //   query: {
        //     ...this.$route.query,
        //     gid: this.$store.state.activity.supInfoMy.asProductid
        //   }
        // });
        Dialog({ message: "你已发起过助力，请点击已发起助力的商品进行查看" });
      } else {
        this.$router.push({
          name: "startSup",
          query: {
            ...this.$route.query,
            gid: item
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@mixin goodsSup {
  position: absolute;
  width: 145px;
  left: 505px;
  height: 40px;
}
._supFriend {
  position: relative;
  height: 1517px;
  .bgImg {
    width: 100vw;
  }
  .headImg {
    position: absolute;
    width: 106px;
    height: 106px;
    top: 50px;
    left: 306px;
  }
  .nickName {
    position: absolute;
    width: 100vw;
    text-align: center;
    top: 170px;
    font-size: 30px;
  }
  .contentCon {
    position: absolute;
    width: 635px;
    top: 500px;
    left: 40px;
    .supContent {
      margin-top: 12px;
      text-align: center;
      font-size: 0.18rem;
      color: #828282;
      span {
        color: $font-color-primary;
      }
    }
    .sucContent {
      text-align: center;
      font-size: 42px;
    }
  }
  .supBtn {
    position: absolute;
    width: 270px;
    top: 633px;
    left: 70px;
    height: 67px;
  }
  .joinMy {
    position: absolute;
    width: 270px;
    top: 633px;
    left: 380px;
    height: 67px;
  }
  .goodsSup1 {
    @include goodsSup;
    top: 960px;
  }
  .goodsSup2 {
    @include goodsSup;
    top: 1170px;
  }
  .goodsSup3 {
    @include goodsSup;
    top: 1368px;
  }
}
</style>